"use client";
import Link from "next/link";
import { type CTA } from "@/base-framework/types/landing";

export default function CTAButton({ cta }: { cta: CTA }) {
  const base =
    "inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 transition-colors";
  const styles: Record<NonNullable<CTA["style"]>, string> = {
    primary:
      "bg-foreground text-background hover:bg-[#383838] dark:hover:bg-[#ccc] focus-visible:ring-foreground/40",
    secondary:
      "border border-black/10 dark:border-white/25 hover:bg-black/5 dark:hover:bg-white/10 focus-visible:ring-foreground/20",
    link: "underline underline-offset-4",
  };
  const cls = `${base} ${styles[cta.style ?? "primary"]}`;

  return (
    <Link
      href={cta.href}
      target={cta.target}
      rel={cta.rel}
      className={cls}
      aria-label={cta.label}
    >
      {cta.label}
    </Link>
  );
}

